<template>
	<div class="search-container">
		<el-form ref="searchRef" :model="query" :inline="true">
			<el-form-item :label="item.label" :prop="item.prop" v-for="item in options">
				<!-- 文本框、下拉框、日期框 -->
				<el-input v-if="item.type === 'input'" style="width: 192px;" v-model="query[item.prop]" :disabled="item.disabled"
					:placeholder="item.placeholder" clearable :type="item.format ? item.format : 'text'"></el-input>
				<el-select v-else-if="item.type === 'select'" style="width: 192px;" v-model="query[item.prop]" :disabled="item.disabled"
					:placeholder="item.placeholder" clearable>
					<template v-if="item.optLabel">
					<el-option v-for="opt in item.opts" :label="opt[item.optLabel]" :value="opt[item.optValue]" :key="opt[item.optValue]"></el-option>
					</template >
					<template v-else>
					<el-option v-for="opt in item.opts" :label="opt.label" :value="opt.value" :key="opt.value"></el-option>
					</template>
				</el-select>
					<!-- style="width: 192px;" -->
				<el-date-picker v-else-if="item.type === 'date'"
					:type="'date'"
					v-model="query[item.prop]"
					:format="item.format"
					:value-format="item.format"></el-date-picker>
				<el-date-picker v-else-if="item.type === 'datetimerange'"
					:type="item.dateType ? item.dateType : 'date'"
					v-model="query[item.prop]"
					:format="item.format"
					start-placeholder="开始时间"
					end-placeholder="结束时间"
					:shortcuts="item.shortcuts ? shortcuts : []"
					:value-format="item.format"
					:default-time="defaultTime"></el-date-picker>
				<el-date-picker v-else-if="item.type === 'daterange'"
					:type="item.dateType ? item.dateType : 'date'"
					v-model="query[item.prop]"
					:format="item.format"
					start-placeholder="开始时间"
					end-placeholder="结束时间"
					:shortcuts="item.shortcuts ? shortcuts : []"
					:value-format="item.format"
					:default-time="defaultTime"></el-date-picker>
					<!-- :default-time="['00:00:00', '23:59:59']" -->
			</el-form-item>
			<el-form-item>
				<el-button type="primary" :icon="Search" @click="search">搜索</el-button>
				<el-button :icon="Refresh" @click="resetForm(searchRef)">重置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script lang="ts" setup>
import { FormInstance } from 'element-plus';
import { Search, Refresh } from '@element-plus/icons-vue';
import { PropType, ref } from 'vue';
import { FormOptionList } from '@/types/form-option';

const props = defineProps({
	query: {
		type: Object,
		required: true
	},
	options: {
		type: Array as PropType<Array<FormOptionList>>,
		required: true
	},
	search: {
		type: Function,
		default: () => { }
	}
});

const shortcuts = [
  {
    text: '近1周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '近1个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
]
const defaultTime =[
	new Date(2000, 0, 1, 0, 0, 0),   // 00:00:00
	new Date(2000, 0, 1, 23, 59, 59) // 23:59:59
]//默认时间

const searchRef = ref<FormInstance>();
const resetForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return
	formEl.resetFields()
	props.search();
}
</script>

<style scoped>
.search-container {
	padding: 20px 30px 0;
	background-color: #fff;
	margin-bottom: 10px;
	border: 1px solid #ddd;
	border-radius: 5px
}
</style>
